<template>
  <div class="processing_detail" v-if="dialogVisible">
    <el-dialog
      title="处理明细"
      v-dialogDrag
      :close-on-click-modal="false"
      width="1200px"
      :visible.sync="dialogVisible"
      customClass="mes_dialog"
      @closed="clearData">
      <div class="table_container" v-loading="isLoading">
        <div class="viewName">
          <span>工序名称：{{workstageName}}</span>
          <span>周转码：{{turnoverNumber}}</span>
        </div>
        <el-table
          border
          stripe
          :max-height="tableMaxHeight"
          :data="DetailList"
          tooltip-effect="dark"
          class="log_detail_table"
          @sort-change="_sort">
          <el-table-column
            prop="operationDate"
            label="变更时间"
            sortable="custom"
            show-overflow-tooltip
            align="center"
            width="170">
          </el-table-column>
          <el-table-column
            prop="description"
            label="变更内容"
            className="break_left"
            min-width="350">
          </el-table-column>
          <el-table-column
            prop="submitterName"
            label="变更人"
            show-overflow-tooltip
            align="center"
            min-width="100">
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="remarks"
            label="明细"
            className="break_left remarks"
            show-overflow-tooltip
            min-width="300">
            <template slot-scope="scope">
              <span v-html="scope.row.remarks"></span>
            </template>
          </el-table-column>
        </el-table>
        <slot></slot>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProcessingDetail',
  data() {
    return {
      dialogVisible: false, // 是否显示
      isLoading: false, // 加载中
      DetailList: [], // 列表数据
      workstageName: '', // 工序名称
      turnoverNumber: '', // 周转码
      sortData: {}, // 排序
      problemId: '' // 问题处理列表ID
    }
  },
  methods: {
    openDialog(obj) {
      this.workstageName = obj.workstageName
      this.turnoverNumber = obj.turnoverNumber
      this.problemId = obj.id
      this.init()
      this.dialogVisible = true
    },
    // 初始化
    init() {
      this.isLoading = true
      let postData = {
        url: 'a/workstageproblemprocesshistory/workstageProblemProcessHistory/list ',
        method: 'post',
        data: {
          pageNo: 1,
          pageSize: 999,
          query: {
            problemId: this.problemId
          },
        },
        noCommit: true
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.query = {problemId: this.problemId}
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then(res => {
        this.DetailList = res.data.list
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 关闭弹窗清除数据
    clearData() {
      this.DetailList = []
    },
  }
}
</script>

<style lang="less" scoped>
  .processing_detail {
    .viewName {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
    }
  }

  .log_detail_table {
    .el-table__body-wrapper {
      td.break_left {
        .cell {
          height: unset;
          white-space: normal;
          line-height: 18px;
          padding: 3px 10px;
          word-break: break-all;
        }
      }

      .remarks div span {
        display: inline-block;
        padding: 10px 0;
      }
    }
  }
</style>
